<template>
  <div :class="{showIcon: comIsShow,showIconAnima: comIsShow && showAnimaflag!=0}">
    <svg
      v-show="comIsShow"
      @click="isShowComTable"
      t="1651217842491"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3034"
      width="1rem"
      height="1rem"
    >
      <path
        d="M507.904 60.416q93.184-1.024 175.104 33.792t143.872 94.72 97.792 141.312 36.864 174.592q1.024 88.064-30.208 165.888t-87.04 137.728-131.072 98.816-162.304 48.128q-22.528 3.072-48.128 5.12t-56.832 3.072-69.632 0-86.528-6.144q-106.496-10.24-158.208-26.624t-41.472-18.432q54.272-9.216 93.184-29.696 20.48-11.264 16.896-32.256t-19.968-39.424q-52.224-57.344-84.48-133.632t-34.304-164.352q-1.024-93.184 33.792-175.104t95.232-143.36 142.336-97.28 175.104-36.864zM707.584 510.976q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568-18.944-45.056-45.568-18.432-45.056 18.432-18.432 45.056zM450.56 510.976q0 26.624 19.456 46.08t46.08 19.456q27.648 0 46.592-19.456t18.944-46.08q0-27.648-18.944-46.592t-46.592-18.944q-26.624 0-46.08 18.944t-19.456 46.592zM196.608 509.952q0 26.624 18.944 46.08t45.568 19.456q27.648 0 46.592-19.456t18.944-46.08-18.944-45.568-46.592-18.944q-26.624 0-45.568 18.944t-18.944 45.568z"
        p-id="3035"
      ></path>
    </svg>

    <div
      v-show="!comIsShow"
      class="communicationTable"
    >
      <!-- 消息展示区头部 -->
      <div class="messageScreenHeader">
        <!-- 隐藏按钮 -->
        <span
          class="hiddenBtn"
          @click="isShowComTable"
        >-</span>
      </div>

      <!-- 消息展示区 -->
      <div class="messageScreen">
          <div class="messageItem" v-for="(i,index) in messageList" :key="index">
              <span class="userInfo">{{i.date}} {{i.username}}</span>
              <div>{{i.message}}</div>
          </div>
      </div>
      <!-- 消息输入区 -->
      <el-input
        v-model="message"
        type="textarea"
        class="textarea"
        rows="8"
        :autosize="{ minRows: 8, maxRows: 8}"
      />

      <!-- 发送按钮 -->
      <el-button
        type="success"
        class="sendMsgBtn"
        @click="sendMessage"
      >发送</el-button>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { creatWebsocket } from "@/networks/webSocket.js";
import { ElMessage } from "element-plus";
let ws = creatWebsocket(); //创建websocket连接
let comIsShow = ref(true); // 控制聊天窗口显示
let showAnimaflag = ref(0); //首次加载时不播放动画
let message = ref("Hello world！"); //接收用户输入的消息
let messageList = reactive([]);
//切换聊天窗口展示方式
function isShowComTable() {
  comIsShow.value = !comIsShow.value;
  showAnimaflag.value++;
}

// 监听消息广播
ws.addEventListener("message", (data) => {
//   console.log(JSON.parse(data.data));
  messageList.push(JSON.parse(data.data));
});

// 发送聊天消息
function sendMessage() {
  if (ws.readyState != 1) {
    ws = creatWebsocket(); //重新建立连接
    ws.addEventListener("message", (data) => {
      messageList.push(JSON.parse(data.data));
    });
    return ElMessage.error("与服务器连接中断，正在重连");
  }
  ws.send(
    JSON.stringify(
      new userMsg(
        window.sessionStorage.getItem("username"),
        message.value,
        new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString() 
      )
    )
  );
}

// 用户消息类
class userMsg {
  constructor(username, message, date) {
    this.username = username == null ? null : username;
    this.message = message == null ? null : message;
    this.date = date == null ? null : date;
  }
}
</script>

<script>
export default {
  name: "communication",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang='less' scoped>
.showIcon {
  width: 80px;
  height: 80px;
  background: #12afe3;
  position: fixed;
  left: calc(20px + 200px);
  bottom: 20px;
  border-radius: 50%;
  z-index: 20;
  .icon {
    width: 2rem;
    height: 2rem;
    position: relative;
    top: calc(40px - 1rem);
    left: calc(40px - 1rem);
    cursor: pointer;
  }
}

.showIconAnima {
  animation: comIcon;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.communicationTable {
  animation: communicationTableAnima;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  box-shadow: 1px 1px 5px rgb(212, 209, 209), -1px 1px 5px rgb(212, 209, 209),
    1px -1px 5px rgb(212, 209, 209), -1px -1px 5px rgb(212, 209, 209);
  .messageScreen {
    width: 100%;
    height: calc(70% - 1rem);
    border-bottom: 1px solid black;
    overflow: auto;
    .userInfo{
        font-size: 0.5rem;
    }
  }
  .hiddenBtn {
    position: absolute;
    z-index: 20;
    top: -1rem;
    right: 10px;
    cursor: pointer;
    font-size: 2rem;
  }
  .sendMsgBtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .messageScreenHeader {
    height: 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid black;
  }
}

@keyframes communicationTableAnima {
  100% {
    width: 20rem;
    height: 30rem;
    background: rgb(249, 249, 249);
    position: fixed;
    left: calc(20px + 200px);
    bottom: 20px;
    z-index: 20;
    border-radius: 2px;
    opacity: 1;
  }
  90%{
      opacity: 0.5;
  }
  0% {
    width: 80px;
    height: 80px;
    background: #12afe3;
    position: fixed;
    left: calc(20px + 200px);
    bottom: 20px;
    border-radius: 50%;
    z-index: 20;
    opacity: 0;
  }
}

@keyframes comIcon {
  100% {
    width: 80px;
    height: 80px;
    background: #12afe3;
    position: fixed;
    left: calc(20px + 200px);
    bottom: 20px;
    border-radius: 50%;
    z-index: 20;
  }
  0% {
    width: 20rem;
    height: 30rem;
    background: rgb(177, 176, 176);
    position: fixed;
    left: calc(20px + 200px);
    bottom: 20px;
    z-index: 20;
    border-radius: 40px;
  }
}
</style>